<template>
  <div class="list">
    <div class="content">
      <!--<img src={{news.image}}>-->
      <div class="consultList">
        <el-container>
          <el-aside width="300px" v-for="fit in fits" :key="fit">
            <el-avatar shape="square" :size="150" :fit="fit" :src="news.url" style="margin-top: 15px;margin-left: 125px;"></el-avatar>
          </el-aside>
          <el-main>
            <el-row>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  {{news.title}}
                </div>
              </el-col>
              <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="grid-content bg-purple">

                </div>
              </el-col>
              <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-button type="danger" plain  size="mini">置顶</el-button>
                  <el-button type="info" plain  size="mini">{{news.status}}</el-button>
                </div>
              </el-col>
              <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  {{news.author}}&nbsp;&nbsp;&nbsp;&nbsp; {{news.time}}
                </div>
              </el-col>
              <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <el-link type="primary">审核</el-link>
                  &nbsp;&nbsp;&nbsp;&nbsp;

                </div>
              </el-col>
            </el-row>
          </el-main>
        </el-container>


      </div>

    </div>

  </div>

</template>

<script>

  export default {
    name: "auditList",
    data(){
      return {
        fits: ['fill'],
        url:'',
        dialogVisible: false,
        radio: '1',

      }
    },
    props:{
      news:Object,
    },
    methods:{
      created:function () {
        console.log(news.photo)
      }
    }
  }



</script>

<style scoped>
  .el-header, .el-footer {
    /*  background-color: #B3C0D1;*/
    /*color: #333;*/
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: aliceblue;
    color: #333;
    text-align: center;
    line-height: 100px;
  }

  .el-main {

    background-color: aliceblue;
    /*color: #333;*/
    text-align: center;
    line-height: 100px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .list{
    /*height: 400px;*/
    border: 1px solid white;
    width: 96%;
    margin: auto;
    padding-left: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
    background-color: white;
  }
  #imageBox{
    display: inline;
    /*background-color: #B3C0D1;*/
    width: 160px;
    height: 120px;
    margin-top: 34px;
    margin-left: 174px;
  }
  #listline{
    width: 80%;
    height: 140px;
    /*background-color: antiquewhite;*/
    margin-left: 115px;
  }
  #textBox{
    display: inline;
    margin-left: 30px;
    margin-top: 20px;
  }

  .el-aside {
    /*background-color: #D3DCE6;*/
    /*color: #333;*/
    text-align: center;
    line-height: 200px;
    margin-top: 20px;
  }

  .el-main {
    /*background-color: #E9EEF3;*/
    /* color: #333;*/
    text-align: left;
    line-height: 35px;
    margin-top: 20px;
  }

  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    /*background: #99a9bf;*/
  }
  .bg-purple {
    /* background: #d3dce6;*/
  }
  .bg-purple-light {
    /*background: #e5e9f2;*/
  }
  .grid-content {
    border-radius: 4px;
    min-height: 20px;
  }
  .row-bg {
    padding: 10px 0;
    /*background-color: #f9fafc;*/
  }

</style>
